<template>
  <div class="auto clearfix">
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">户编号</p>
      </div>
      <div class="col-xs-9">
        <input type="number" class="search_input" v-model="model.f_userinfo_id" placeholder="请输入用户编号"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">户姓名</p>
      </div>
      <div class="col-xs-9">
        <input type="text" class="search_input" v-model="model.f_user_name" placeholder="请输入用户姓名"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">表号</p>
      </div>
      <div class="col-xs-9">
        <input type="number" class="search_input" v-model="model.f_meternumber" placeholder="请输入表号"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">起时间</p>
      </div>
      <div class="col-xs-9">
        <datepicker
           :value.sync="model.startDate"
           :format="'yyyy-MM-dd'"
           v-model="model.startDate"
           :show-reset-button="reset" placeholder="请输入起时间">
         </datepicker>
        <!-- <input type="text" class="search_input" v-model="model.startDate" placeholder="请输入起下发时间"/> -->
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">止时间</p>
      </div>
      <div class="col-xs-9">
        <datepicker
           :value.sync="model.endDate"
           :format="'yyyy-MM-dd'"
           v-model="model.endDate"
           :show-reset-button="reset" placeholder="请输入止时间">
         </datepicker>
        <!-- <input type="text" class="search_input" v-model="model.endDate" placeholder="请输入止下发时间"/> -->
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-3">
        <p class="text-left">抄表单条数</p>
      </div>
      <div class="col-xs-9">
        {{handcount}}
      </div>
    </div>
    <div class="row" style="margin-top: 20px;">
      <button type="button" class="btn btn-danger btn-lg" style="width: 100%;" @click="search()">查询</button>
    </div>
    <div class="auto" style="padding-top: 20px;">
      <hand-info v-if="show" :data="handinfo"></hand-info>
    </div>
    <div class="auto" v-if="!show">
      <p class="text-warning" style="padding: 0 10px">
        暂无可操作的抄表信息
      </p>
    </div>
  </div>
</template>
<script>
  import * as Util from '../Util'
  import AppData from '../../stores/AppData'
  export default {
    title: '抄表管理',
    data () {
      return {
        model: {
          f_userinfo_id: '',
          f_user_name: '',
          f_meternumber: '',
          startDate: '',
          endDate: ''
        },
        handinfo: [],
        show: false,
        handcount: 0,
        userInfo: {}
      }
    },
    ready () {
      this.userInfo = Object.assign({}, this.userInfo, AppData.loginUser)
      this.model.startDate = `${Util.toStandardYearMonth()}-01`
      this.model.endDate = Util.toStandardDateString()
      this.search()
    },
    methods: {
      search () {
        let condition = '1=1'
        for (let item in this.model) {
          if (this.model[item] !== '' && item !== 'startDate' && item !== 'endDate') {
            condition += `and ${item} = '${this.model[item]}'`
          }
        }
        if (this.model.startDate === '') {
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        console.log(condition, 'condition')
        let res = this.$androidUtil.bzLogic('getUnHandMeterInfo', {data: {startDate: `${this.model.startDate}`, endDate: `${this.model.endDate}`, condition: condition, f_inputtor: `${this.userInfo.name}`}})
        if (res.code === 200) {
          // HostApp.alert('获取到了超表单信息')
          if (res.data.length > 0) {
            this.handcount = res.data.length
            this.handinfo = [...res.data]
            this.show = true
          }
        } else {
          this.handinfo = []
          this.show = false
        }
      }
    },
    events: {
      'select' (val) {
        this.$dispatch('changepage', val, 'save')
      }
    }
  }
</script>
<style>
  .search_input {
    border: 0;
    outline: none;
  }
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
</style>
